<template>
  <view class="login">
    <view style="margin-bottom: 200rpx;font-size: 40rpx;">基于微信小程序的智伴生活服务平台</view>
    <view class="notice">
      <view class="checkout-tips" v-if="tips">请阅读并勾选用户协议</view>
      <checkbox-group @change="setChange()">
        <label>
          <checkbox :checked="selfChecked" color="#DC143C" style="transform:scale(0.8)" />
        </label>
      </checkbox-group>
      <text class="notice-info" @click="toNotice">《用户协议》</text>
    </view>
    <button class="publish" type="primary" @click="loginBtn">微信快捷登录</button>
    <button class="publish not-login" type="primary" @click="notLogin">暂不登录</button>
  </view>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import { auth, login } from '../../config/api'

export default {
  data() {
    return {
      userinfo: {},
      logo: '../../static/logo-city.png',
      checkNotice: [{
        text: '我已阅读并同意',
        value: 0
      }],
      selfChecked: false,
      tips: false
    }
  },
  onLoad() {

  },
  computed: {
   ...mapGetters(['getUserinfo'])
  },
  methods: {
   ...mapActions(['login', 'authUserInfo']),
    // 选中多选框
    setChange() {
      this.selfChecked =!this.selfChecked;
    },
    // 取消登录
    notLogin() {
      uni.switchTab({
        url: '/pages/index/index'
      })
    },
    // 登录
    loginBtn() {
      var _this = this
      if (this.selfChecked) {
        uni.login({
          success: function(res) {
            if (res.code) {
              // 登录成功，处理code
              console.log('登录code:', res.code);
              // 发送code到后端
            } else {
              console.error('登录失败:', res.errMsg);
              uni.showToast({
                title: '登录失败，请重试',
                icon: 'none'
              });
            }
          },
          fail: function(err) {
            console.error('调用登录API失败:', err);
            uni.showToast({
              title: '网络错误，请检查网络连接',
              icon: 'none'
            });
          }
        });
      } else {
        this.tips = true
        setTimeout(() => {
          _this.tips = false
        }, 1500)
      }
    },
    // 用户协议
    toNotice() {
      uni.navigateTo({
        url: '/pages/notice/notice'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.login {
  width: 100%;
  height: 100vh;
  text-align: center;
  padding-top: 40%;

 .logo {
    display: block;
    width: 200px;
    height: 200px;
    border-radius: 100%;
    margin: 50px auto;
  }
 .notice {
    padding: 5px 0px;
    display: inline-flex;
    font-size: 14px;
    line-height: 26px;
    position: relative;

   .checkout-tips {
      position: absolute;
      top: -25px;
      width: 110%;
      background: #333333ad;
      color: #fff;
      font-size: 12px;
      border-radius: 3px;
    }
   .notice-choice {
     .checklist-box {
        margin-right: 0!important;
      }
    }
   .notice-info {
      color: #20C3FE;
    }
  }
 .publish {
    font-size: 16px;
    width: 80%;
    border-radius: 30px;
    background: #20C3FE;
    &::after {
      border-radius: 100px;
    }
  }
 .not-login {
    color: #666;
    background: #eee;
    margin-top: 15px;
  }
}
</style>